@import "../../styles/mixins/btn";
@import "../../styles/mixins/utils";
@import "../../styles/mixins/vars";

.pagination {
    display: flex;
    justify-items: center;
    align-items: center;
    $pagination-item-height: rem(30);

    .prev-page, .next-page, .page-item, .pagination-info {
        border: solid 1px #bbb;
        height: $pagination-item-height;
        line-height: $pagination-item-height;
        text-align: center;
        cursor: pointer;
        border-radius: rem(3);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        margin-right: rem(5);
    }
    .prev-page, .next-page {
        width: rem(60);
    }
    .pages {
        display: flex;
    }
    .page-item {
        width: $pagination-item-height;
        background-color: #fff;
        //background: linear-gradient(top, #ffffff 0%,#efefef 100%);
        &:hover {
            background-color: #f0f0f0;
        }
        &.active {
            color: #fff;
            background-color: $primary;
        }
    }
}